<template>
	<div id="game1" style="width:600px;height:480px;margin: 0 auto;">
		<!-- {{length}}{{colorList}} -->
		<el-row>
			<el-col :span=20>
				<div style="width:480px;height:480px;border:#F00 1px solid;position:relative">
				<el-row>
					<el-col :span="6" v-for="(item,index) in length" :key="index" style="width:120px;height:120px;float:left;line-height:120px;border:1px solid #409eff">
						<div v-if="item==1||item==2||item==5||item==6" :style="{'height': '100%','background-color':colorList[0]}">
							<!-- {{item}} -->
						</div>
						<div v-if="item==3||item==4||item==7||item==8" :style="{'height': '100%','background-color':colorList[1]}">
							<!-- {{item}} -  ->
						</div>
						<div v-if="item==9||item==10||item==13||item==14" :style="{'height': '100%','background-color':colorList[2]}">
							<!-- {{item}} -->
						</div>
						<div v-if="item==11||item==12||item==15||item==16" :style="{'height': '100%','background-color':colorList[3]}">
							<!-- {{item}} -->
						</div>
					</el-col>
				</el-row>
				<template v-for="key in 9">
						<!-- <span v-if="key==1||key==2||key==3" :key=key style="position:absolute;width:30px;height:30px;" :style="{left:(120*key)-15+'px',top:105+'px'}">
							{{item}}
						</span> -->
						<span :key=key style="position:absolute;width:30px;height:30px;background-color:#fff;font-size: 20px;line-height: 32px;border-radius:50%" @click="getPoint(key)" :style="{left:(120*(parseInt((key-1)%3)+1))-15+'px',top:(120*(parseInt((key-1)/3)+1))-15+'px'}">
							<i class="el-icon-refresh-right"></i>
						</span>
						<!-- <div v-if="item==3||item==4||item==7||item==8" style="background-color:#00f">
							{{item}}
						</div>
						<div v-if="item==9||item==10||item==13||item==14" style="background-color:#f00">
							{{item}}
						</div> -->
					</template>
			</div>
			</el-col>
			<el-col :span=4>
				<div style="width:60px;">
				<el-row>
					<el-col :span="6" v-for="(item,index) in 4" :key="index" style="width:30px;height:30px;float:left;line-height:30px;border:1px solid #409eff">
						<div :style="{'height': '100%','background-color':colorList[index]}">
							<!-- {{item}} -->
						</div>
					</el-col>
				</el-row>
			</div>
			</el-col>
		</el-row>
	</div>
</template>
<script>
export default {
  data () {
    return {
			colorList:["#0acc0a","#00f","#f00","#ff0"],
      length: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
    }
  },
  created () {

  },
  mounted () {
		console.log(this.length.sort(this.randomNumber))
		this.length=this.randomNumber(this.length)
		this.colorList=this.randomNumber(this.colorList)

  },
  methods: {
		randomNumber(data){
	    var arrlen = data.length;
	    var try1 = new Array();
	    for(var i = 0;i < arrlen; i++){
	        try1[i] = i;
	    }
	    var try2 = new Array();
	    for(var i = 0;i < arrlen; i++){
	        try2[i] = try1.splice(Math.floor(Math.random() * try1.length),1);
	    }
	    var try3 = new Array();
	    for(var i = 0; i < arrlen; i++){
	        try3[i] = data[try2[i]];
	    }
	    return try3;
    },

		getPoint(n){
			if(n/3<=1){
				console.log("第一行",n,n+1,n+4,n+5)
				console.log('对应的是:',this.length[n-1],this.length[n],this.length[n+3],this.length[n+4])
				var temp=this.length[n-1]
				this.length[n-1]=this.length[n+3]
				this.length[n+3]=this.length[n+4]
				this.length[n+4]=this.length[n]
				this.length[n]=temp

			}
			if(n/3>1&&n/3<=2){
				console.log("第二行",n+1,n+2,n+5,n+6)
				console.log('对应的是:',this.length[n],this.length[n+1],this.length[n+4],this.length[n+5])
				var temp=this.length[n]
				this.length[n]=this.length[n+4]
				this.length[n+4]=this.length[n+5]
				this.length[n+5]=this.length[n+1]
				this.length[n+1]=temp
			}
			if(n/3>2&&n/3<=3){
				console.log("第三行",n+2,n+3,n+6,n+7)
				console.log('对应的是:',this.length[n+1],this.length[n+2],this.length[n+5],this.length[n+6])
				var temp=this.length[n+1]
				this.length[n+1]=this.length[n+5]
				this.length[n+5]=this.length[n+6]
				this.length[n+6]=this.length[n+2]
				this.length[n+2]=temp
			}
			this.$forceUpdate()
			this.checkSuccess()
		},
		checkSuccess(){
			let temp1=[this.length[0],this.length[1],this.length[4],this.length[5]].toString()
			let temp2=[this.length[2],this.length[3],this.length[6],this.length[7]].toString()
			let temp3=[this.length[8],this.length[9],this.length[12],this.length[13]].toString()
			let temp4=[this.length[10],this.length[11],this.length[14],this.length[15]].toString()
			console.log(temp1)
			if(temp1.indexOf('1')==-1||temp1.indexOf('2')===-1||temp1.indexOf('5')===-1||temp1.indexOf('5')===-1){
				return
			}
			if(temp2.indexOf('3')==-1||temp2.indexOf('4')===-1||temp2.indexOf('7')===-1||temp2.indexOf('8')===-1){
				return
			}
			if(temp3.indexOf('9')==-1||temp3.indexOf('10')===-1||temp3.indexOf('13')===-1||temp3.indexOf('14')===-1){
				return
			}
			if(temp4.indexOf('11')==-1||temp4.indexOf('12')===-1||temp4.indexOf('15')===-1||temp4.indexOf('16')===-1){
				return
			}
			console.log("-===================================")
		},
		getPoint2(n){
			console.log(n/1)
			if(n/5<=1){
				console.log("第一行",n,n+1,n+6,n+7)
			}
			if(n/5>5&&n/5<=2){
				console.log("第二行",n+1,n+2,n+7,n+8)
			}
			if(n/5>2&&n/5<=3){
				console.log("第三行",n+2,n+3,n+8,n+9)
			}
			if(n/5>3&&n/5<=4){
				console.log("第四行",n+3,n+4,n+9,n+10)
			}
			if(n/5>4&&n/5<=5){
				console.log("第五行",n+4,n+5,n+10,n+11)
			}
		}
  }
}
</script>
